<template>
    <div class="home" v-title data-title="申请补报">
        <headerTop title="申请补报"></headerTop>
        <div class="home-content">
            <div class="home-item borderRightLine" @click="selectOffice(1)">
                <img src="../assets/img/office.png"/>
                <span>文书档案</span>
            </div>
            <!--<router-link :to="{name:'officeArchives',query:{type:100}}"
                         class="home-item borderRightLine">

            </router-link>-->
            <div class="home-item borderRightLine" @click="selectOffice(2)">
                <img src="../assets/img/person.png"/>
                <span>人事档案</span>
            </div>
            <!--<router-link
                    :to="{name:'personnelArch',query:{type:100}}"
                    >

            </router-link>-->
            <div class="home-item" @click="selectOffice(3)">
                <img src="../assets/img/project.png"/>
                <span>工程档案</span>
            </div>
            <!--<router-link
                    :to="{name:'projectArch',query:{type:100}}"
                    >

            </router-link>-->
        </div>
        <van-popup v-model="isShowSelectType" position="bottom" round>
            <van-picker
                    title="选择档案类型"
                    show-toolbar
                    :columns="columns"
                    :default-index="defaultShowIndex"
                    :visible-item-count="5"
                    @confirm="onConfirm"
                    @cancel="onCancel"/>
        </van-popup>
    </div>
</template>

<script>
    import headerTop from "@/components/headerTop";

    export default {
        name: "Repair",
        components: {
            headerTop
        },
        data(){
            return{
                columns: [],
                isShowSelectType:false,
                defaultShowIndex:0,
            }
        },
        methods:{
            selectOffice(flag){
                this.columns=[]
                if (flag==1){
                    //文书档案
                    this.defaultShowIndex=0;
                    this.columns.push("文书档案")
                    this.columns.push("特种载体档案")
                    this.isShowSelectType = true
                }else if (flag==2){
                    //人事档案
                    this.$router.push({
                        name: "personnelArch",
                        query: {
                            projectType: 'hr',
                            type:100
                        }
                    })
                }else {
                    //工程档案
                    this.defaultShowIndex=1;
                    this.columns.push("会计档案")
                    this.columns.push("基建档案")
                    this.columns.push("工程档案")
                    this.columns.push("业务档案")
                    this.isShowSelectType = true
                }
            },
            onConfirm(value) {
                this.isShowSelectType = false
                if (value=="文书档案"){
                    this.$router.push({
                        name: "officeArchives",
                        query: {
                            projectType: 'book',
                            type:100
                        }
                    })
                }else if (value=="特种载体档案"){
                    this.$router.push({
                        name: "officeArchives",
                        query: {
                            projectType: 'special',
                            type:100
                        }
                    })
                }else if (value=="会计档案"){
                    this.$router.push({
                        name: "projectArch",
                        query: {
                            projectType: 'account',
                            type:100
                        }
                    })
                }else if (value=="基建档案"){
                    this.$router.push({
                        name: "projectArch",
                        query: {
                            projectType: 'capital',
                            type:100
                        }
                    })
                }else if (value=="工程档案"){
                    this.$router.push({
                        name: "projectArch",
                        query: {
                            projectType: 'project',
                            type:100
                        }
                    })
                }else if (value=="业务档案"){
                    this.$router.push({
                        name: "projectArch",
                        query: {
                            projectType: 'business',
                            type:100
                        }
                    })
                }
            },
            onCancel() {
                this.isShowSelectType = false
            },
        },
        mounted() {

        }
    };
</script>
<style lang="scss" scoped>
    .home {
        width: 100%;
        min-height: 100vh;
        background: $page-bg;

        .header-title {
            width: 100%;
            height: $header-top;
            background: $main-color;
            color: #ffffff;
            font-size: $header-title;
            line-height: $header-top;
            text-align: center;
        }

        .home-content {
            width: 100%;
            display: flex;
            align-items: flex-start;
            justify-content: flex-start;
            flex-wrap: wrap;
            border-bottom: 1px solid $line-color;
            background: white;
            margin-top: 56px;

            .home-item {
                width: calc(calc(100% - 3px) / 3);
                display: flex;
                align-items: center;
                justify-content: center;
                flex-direction: column;

                img {
                    margin-top: 20px;
                    width: 28px;
                    height: 28px;
                }

                span {
                    color: $black;
                    font-size: 14px;
                    margin-top: 5px;
                    margin-bottom: 20px;
                }
            }

            .borderRightLine {
                border-right: 1px solid $line-color;
            }
        }
    }

</style>